<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet/less" href="./assets/css/reset.less">
    <link rel="stylesheet/less" href="./assets/css/common.less">
    <link rel="stylesheet/less" href="./assets/css/list.less">
</head>

<body>
    <header class="header" id="header">
        <span class="title" id="title">List Screen</span>
        <input type="checkbox" name="list" id="checkbox">
        <label for="checkbox">
            <span id="label" class="glyphicon glyphicon-menu-hamburger"></span>
        </label>
        <div class="menulist" id="menulist">
            <ul>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/profile icon.png" alt="">
                        </div>
                        <span>
                            Profile
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/inbox icon.png" alt="">
                        </div>
                        <span>
                            Inbox
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/Pointer.png" alt="">
                        </div>
                        <span>
                            Location
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/_.png" alt="">
                        </div>
                        <span>
                            FAQs
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/settings.png" alt="">
                        </div>
                        <span>
                            Settings
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/logout icon.png" alt="">
                        </div>
                        <span>
                            Sign Out
                        </span>
                    </div>

                </li>
            </ul>
        </div>
    </header>

    <div class="list">
        <div class="search">
            <div class="img">
                <img src="./assets/images/Magnifying Glass.png" alt="">
            </div>
            <input type="text" id="search" placeholder="Search">
        </div>
        <ul>
            <li>
                <div class="head">
                    <img src="./assets/images/Layer 3.png" alt="">
                </div>
                <div class="info">
                    <span class="name">John Henry Doe</span>
                    <span class="place">San Francisco,CA</span>
                </div>
                <div class="more">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>

            </li>
            <li>
                <div class="head">
                    <img src="./assets/images/Layer 3.png" alt="">
                </div>
                <div class="info">
                    <span class="name">John Henry Doe</span>
                    <span class="place">San Francisco,CA</span>
                </div>
                <div class="more">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>

            </li>
            <li>
                <div class="head">
                    <img src="./assets/images/Layer 3.png" alt="">
                </div>
                <div class="info">
                    <span class="name">John Henry Doe</span>
                    <span class="place">San Francisco,CA</span>
                </div>
                <div class="more">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>

            </li>
            <li>
                <div class="head">
                    <img src="./assets/images/Layer 3.png" alt="">
                </div>
                <div class="info">
                    <span class="name">John Henry Doe</span>
                    <span class="place">San Francisco,CA</span>
                </div>
                <div class="more">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>

            </li>
            <li>
                <div class="head">
                    <img src="./assets/images/Layer 3.png" alt="">
                </div>
                <div class="info">
                    <span class="name">John Henry Doe</span>
                    <span class="place">San Francisco,CA</span>
                </div>
                <div class="more">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>

            </li>
            <li>
                <div class="head">
                    <img src="./assets/images/Layer 3.png" alt="">
                </div>
                <div class="info">
                    <span class="name">John Henry Doe</span>
                    <span class="place">San Francisco,CA</span>
                </div>
                <div class="more">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </div>

            </li>
        </ul>
    </div>

    <div class="footer">
        <a href="./index.html" class="item">
            <div class="img">
                <img src="./assets/images/Rectangle 2 copy.png" alt="">
            </div>
        </a>
        <a href="javascript:void(0)" class="item">
            <div class="img">
                <img src="./assets/images/Tools.png" alt="">
            </div>
        </a>
        <a href="./shop.html" class="item">
            <div class="img">
                <img src="./assets/images/Ellipse 1 copy 2.png" alt="">
            </div>
        </a>
    </div>
</body>

</html>


<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    var header = $("#header")
    var title = $("#title")
    var checkbox = $("#checkbox")
    var label = $("#label")
    var menulist = $("#menulist")


    label.click(function () {

        if ($("#checkbox").is(":checked") == true) {
            document.getElementById("title").innerHTML = 'List Screen';
            label.addClass("glyphicon-menu-hamburger")
            label.removeClass("glyphicon-remove")
            header.css({background:"transparent"})
            menulist.hide("slow",function(){
                menulist.css({display: 'none'})
            });


        } else {
            document.getElementById("title").innerHTML = 'MENU';
            label.removeClass("glyphicon-menu-hamburger")
            label.addClass("glyphicon-remove")
            header.css({background:"#ffbf25"})
            menulist.show("slow",function(){
                menulist.css({display: 'block'})
            });
        }
    });

    // label.click(function(){
    //         label.toggle(
    //         function () {
    //             label.removeClass("glyphicon-menu-hamburger")
    //             label.addClass("glyphicon-remove");
    //         }
    //         ,
    //         function () {
    //             label.removeClass("glyphicon-remove")
    //             label.addClass("glyphicon-menu-hamburger")
    //         }
    //     )
    //     }
    // )


</script>